<template>
  <div id="header">
    <nav-top-cpn :phone="phone" :NavTopCpnData="NavTopCpnData" />
    <div class="nav-container">
      <div class="nav-hover-area">
        <nav-main-cpn :BannersData="NavMainCpnData" class="nav-main-cpn" />
        <nav-bottom-cpn :products="NavBottomCpnData" class="nav-bottom-cpn" />
      </div>
    </div>
  </div>
</template>

<script>
import NavTopCpn from "./CommonHeaderCpn/NavTopCpn.vue";
import NavMainCpn from "./CommonHeaderCpn/NavMainCpn.vue";
import NavBottomCpn from "./CommonHeaderCpn/NavBottomCpn.vue";
export default {
  name: "CommonHeader",
  components: {
    NavTopCpn,
    NavMainCpn,
    NavBottomCpn,
  },
  data() {
    return {
      phone: "0000-13417601365",
      NavTopCpnData: [
        {
          name: "高标准农田",
          url: "/",
        },
        {
          name: "数字大棚",
          url: "/",
        },
        {
          name: "产业大脑",
          url: "/",
        },
        {
          name: "智慧畜牧",
          url: "/",
        },
        {
          name: "智慧溯源",
          url: "/",
        },
        {
          name: "农业数据中台",
          url: "/",
        },
        {
          name: "数字乡村",
          url: "/",
        },
        {
          name: "智慧渔业",
          url: "/",
        },
      ],
      NavMainCpnData: [
        {
          title: "首页",
          routerUrl: "/home",
        },
        {
          title: "产品服务",
          routerUrl: "/product-scheme",
        },
        {
          title: "智农",
          routerUrl: "/product-scheme-platform",
        },
        {
          title: "解决方案",
          routerUrl: "/service-product",
        },
        {
          title: "应用案例",
          routerUrl: "/application-cases",
        },
        {
          title: "关于我们",
          routerUrl: "/about",
        },
      ],
      NavBottomCpnData: [
        {
          title: "智农一体化",
          introduce: "农业一体化管控平台",
          isHot: false,
          isNew: false,
          url: "/",
        },
        {
          title: "智农一体化",
          introduce: "农业一体化管控平台",
          isHot: false,
          isNew: true,
          url: "/",
        },
        {
          title: "智农一体化",
          introduce: "农业一体化管控平台",
          isHot: true,
          isNew: false,
          url: "/",
        },
        {
          title: "智农一体化",
          introduce: "农业一体化管控平台",
          isHot: false,
          isNew: true,
          url: "/",
        },
        {
          title: "智农一体化",
          introduce: "农业一体化管控平台",
          isHot: true,
          isNew: false,
          url: "/",
        },
        {
          title: "智农一体化",
          introduce: "农业一体化管控平台",
          isHot: false,
          isNew: false,
          url: "/",
        },
        {
          title: "智农一体化",
          introduce: "农业一体化管控平台",
          isHot: false,
          isNew: false,
          url: "/",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.nav-container {
  position: relative;
  z-index: 999;
  .nav-hover-area {
    position: relative;

    .nav-bottom-cpn {
      opacity: 0;
      visibility: hidden;
      position: absolute;
      top: 100%;
      left: 0;
      transition: opacity 0.5s, visibility 0s linear 0.5s;
    }
  }
}

.nav-hover-area:hover .nav-bottom-cpn {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.nav-hover-area:hover .nav-main-cpn {
  opacity: 1;
}
</style>
